<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="includes/layout">

<div layout:fragment="sidebar" th:replace="includes/sidebar :: test"></div>

<div layout:fragment="content">
    <div class="layui-row layui-col-space10">
        <div class="layui-form">
            <label class="layui-inline">当前模板</label>
            <div class="layui-inline">
                <select id="selectTemplate" lay-filter="selectTemplate">
                    <option th:each="item:${templateList}" th:value="${item.TEMPLATE_ID}" th:text="${item.TEMPLATE_NAME}"></option>
                </select>
            </div>
            <div class="layui-btn-group">
                <button class="layui-inline layui-btn" id="addTemplate">新增模板</button>
                <button class="layui-inline layui-btn" id="downloadTemplate">下载模板</button>
            </div>
            <button class="layui-inline layui-btn layui-btn-normal" id="saveTemplateItem">保存代码</button>
        </div>

        <div class="layui-col-md3" id="templateTree"></div>
        <div class="layui-col-md9" id="code"></div>
    </div>
</div>

<div layout:fragment="js">
<link rel="stylesheet" href="/res/lib/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" href="/res/lib/codemirror/theme/darcula.css"/>

<script type="text/javascript" src="/res/lib/codemirror/lib/codemirror.js"></script>
<script src="/res/lib/codemirror/mode/meta.js"></script>
    <script src="/res/lib/codemirror/addon/edit/matchbrackets.js"></script>

<script src="/res/lib/codemirror/mode/clike/clike.js"></script>
<script src="/res/lib/codemirror/mode/css/css.js"></script>
<script src="/res/lib/codemirror/mode/groovy/groovy.js"></script>
<script src="/res/lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="/res/lib/codemirror/mode/javascript/javascript.js"></script>
<script src="/res/lib/codemirror/mode/markdown/markdown.js"></script>
<script src="/res/lib/codemirror/mode/python/python.js"></script>
<script src="/res/lib/codemirror/mode/sass/sass.js"></script>
<script src="/res/lib/codemirror/mode/shell/shell.js"></script>
<script src="/res/lib/codemirror/mode/sql/sql.js"></script>
<script src="/res/lib/codemirror/mode/vue/vue.js"></script>
<script src="/res/lib/codemirror/mode/xml/xml.js"></script>
<script src="/res/lib/codemirror/mode/yaml/yaml.js"></script>
<script type="text/javascript">
    layui.use(['form', 'tree', 'element', 'layer'], function() {
        var $ = layui.jquery,
            form = layui.form,
            tree = layui.tree,
            layer = layui.layer,
            codeMirror = {},
            treeData = [],
            treeClickData = {};

        // 模板树
        tree.render({
            elem: '#templateTree'
            ,data: []
            ,id: 'templateTree'
            ,showCheckbox: true
            ,edit: ['add', 'update', 'del']
            ,click: function(obj) {
                treeClickData = obj;
                if(obj.data.itemType === 2) {
                    // 获取文件内容
                    $.post("/api/userTemplateItem/" + obj.data.id, {}, function(res) {
                        codeMirror.setValue(res.data.itemValue);
                        var type = CodeMirror.findModeByFileName(res.data.itemName);
                        if(type != null) {
                            codeMirror.setOption("mode", type.mime);
                        }
                    });
                }

                $(".tree-item-selected").removeClass("tree-item-selected");
                $(obj.elem).find(">.layui-tree-entry>.layui-tree-main").children(".layui-tree-txt").addClass("tree-item-selected");
            }
        });

        // 选择模板
        $(function() {
            $("#selectTemplate").change(function() {
                getUserTemplateItem({value: $("#selectTemplate").val()})
            });
            $("#selectTemplate").trigger('change');
        });
        form.on('select(selectTemplate)', function(data) {
            getUserTemplateItem(data)
        });
        function getUserTemplateItem(data) {
            $.post("/api/userTemplateItem", {
                "templateId": data.value
            }, function(res) {
                console.log(res)
                if(res != null && res.metaStatus === 'success') {
                    treeData = res.data;
                    tree.reload('templateTree', {
                        data: treeData
                    });
                } else {
                    layer.msg(res.metaMessage);
                }
            });
        }

        // 代码查看器
        codeMirror = CodeMirror(document.getElementById("code"), {
            value: "function hello() {\n\treturn '请点击左侧文件查看代码';\n}\n",
            mode: "javascript",
            lineNumbers: true, // 显示行号
            matchBrackets: true, // 匹配括号
            // viewportMargin: Infinity,
            theme: "darcula"
        });

        // 添加模板
        $('#addTemplate').on('click', function() {
            layer.open({
                type: 2
                ,title: '添加模板'
                // ,shade: 0
                ,area: ['700px', '300px']
                ,maxmin: true
                ,content: '/manage/userTemplate/edit'
            });
        });

        // 保存模板代码
        $('#saveTemplateItem').on('click', function() {
            $.post("/api/saveTemplateItem", {
                "templateItemId": treeClickData.data.id,
                "templateItemValue": codeMirror.getValue()
            }, function(res) {
                if(res != null && res.metaStatus === 'success') {
                    layer.msg("操作成功");
                } else {
                    layer.msg(res.metaMessage);
                }
            });
        });

        $('#downloadTemplate').on('click', function() {
            $.post("/api/downloadTemplate", {
                "templateId": $("#selectTemplate").val()
            }, function(res) {
                console.log(res)
                if(res != null && res.metaStatus === 'success') {
                    window.open("/api/downloadTemplateFile?downloadFileName=" + res.data.zipFileName, "blank");
                    layer.msg("下载成功");
                } else {
                    layer.msg(res.metaMessage);
                }
            });
        });
    });
</script>

<style>
    .CodeMirror {
        height: 760px;
    }
    #templateTree {
        height: 760px;
        overflow: auto;
    }
    .tree-item-selected {
        font-weight: 700;
    }
</style>
</div>

</html>